<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-content">
        <div class="logo">
          <el-icon class="logo-icon"><Tools /></el-icon>
          <span class="logo-text">在线工具集合</span>
        </div>
        <div class="nav-menu">
          <el-menu mode="horizontal" :ellipsis="false" background-color="transparent" text-color="#333" active-text-color="#409EFF">
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">图片工具</el-menu-item>
            <el-menu-item index="3">文本工具</el-menu-item>
            <el-menu-item index="4">转换工具</el-menu-item>
          </el-menu>
        </div>
      </div>
    </el-header>

    <!-- 主要内容区域 -->
    <el-main class="main-content">
      <!-- 欢迎区域 -->
      <div class="welcome-section">
        <h1 class="welcome-title">专业在线工具集合</h1>
        <p class="welcome-subtitle">提供各种实用的在线工具，提升您的工作效率</p>
      </div>

      <!-- 工具分类区域 -->
      <div class="tools-section">
        <!-- 工具分类循环 -->
        <div v-for="category in toolCategories" :key="category.id" class="tool-category">
          <div class="category-header">
            <el-icon class="category-icon"><component :is="category.icon" /></el-icon>
            <h2 class="category-title">{{ category.title }}</h2>
            <p class="category-description">{{ category.description }}</p>
          </div>

          <el-row :gutter="50" class="tool-grid">
            <el-col :span="6" v-for="tool in category.tools" :key="tool.id">
              <el-card class="tool-card" :class="{ 'placeholder-card': tool.isPlaceholder }" shadow="hover" @click="tool.route && navigateTo(tool.route)">
                <div class="tool-content">
                  <div class="tool-icon">
                    <el-icon size="48"><component :is="tool.icon" /></el-icon>
                  </div>
                  <h3 class="tool-name">{{ tool.name }}</h3>
                  <p class="tool-desc">{{ tool.description }}</p>
                </div>
                <div class="tool-footer" v-if="!tool.isPlaceholder">
                  <el-button type="primary" size="default" :disabled="!tool.route">
                    {{ tool.route ? '立即使用' : '即将上线' }}
                    <el-icon v-if="tool.route" class="el-icon--right"><ArrowRight /></el-icon>
                  </el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-main>

    <!-- 底部 -->
    <el-footer class="footer">
      <div class="footer-content">
        <p>&copy; 2025 在线工具集合. 专业、高效、免费的在线工具平台</p>
      </div>
    </el-footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Tools, Picture, Document, Switch, View, Crop, MagicStick, Plus, EditPen, Key, DataAnalysis, Files, ArrowRight } from '@element-plus/icons-vue';

const router = useRouter();

// 工具分类数据
const toolCategories = ref([
  {
    id: 'image',
    title: '图片处理工具',
    description: '强大的图片处理和编辑工具',
    icon: Picture,
    tools: [
      {
        id: 'blur',
        name: '图片模糊',
        description: '为图片添加模糊效果，保护隐私或创建艺术效果',
        icon: View,
        route: '/image-tools/blur',
      },
      {
        id: 'crop',
        name: '图片裁剪',
        description: '精确裁剪图片，支持多种比例和自定义尺寸',
        icon: Crop,
        route: '/image-tools/crop',
      },
      {
        id: 'filter',
        name: '图片滤镜',
        description: '丰富的滤镜效果，让您的图片更加出色',
        icon: MagicStick,
        route: null,
      },
      {
        id: 'more-image',
        name: '更多工具',
        description: '更多图片处理工具正在开发中',
        icon: Plus,
        isPlaceholder: true,
      },
    ],
  },
  {
    id: 'text',
    title: '文本工具',
    description: '文本处理和格式化工具',
    icon: Document,
    tools: [
      {
        id: 'editor',
        name: '文本编辑器',
        description: '在线文本编辑和格式化工具',
        icon: EditPen,
        route: null,
      },
      {
        id: 'password',
        name: '密码生成器',
        description: '生成安全可靠的随机密码',
        icon: Key,
        route: null,
      },
      {
        id: 'statistics',
        name: '文本统计',
        description: '统计文本字数、行数等信息',
        icon: DataAnalysis,
        route: null,
      },
      {
        id: 'more-text',
        name: '更多工具',
        description: '更多文本工具正在开发中',
        icon: Plus,
        isPlaceholder: true,
      },
    ],
  },
  {
    id: 'convert',
    title: '转换工具',
    description: '各种格式转换和编码工具',
    icon: Switch,
    tools: [
      {
        id: 'format-convert',
        name: '格式转换',
        description: '支持多种文件格式之间的转换',
        icon: Files,
        route: null,
      },
      {
        id: 'more-convert-1',
        name: '更多工具',
        description: '更多转换工具正在开发中',
        icon: Plus,
        isPlaceholder: true,
      },
      {
        id: 'more-convert-2',
        name: '更多工具',
        description: '更多转换工具正在开发中',
        icon: Plus,
        isPlaceholder: true,
      },
      {
        id: 'more-convert-3',
        name: '更多工具',
        description: '更多转换工具正在开发中',
        icon: Plus,
        isPlaceholder: true,
      },
    ],
  },
]);

// 统一的导航方法
const navigateTo = (route) => {
  if (route) {
    router.push(route);
  }
};
</script>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #f9f7f3 !important;
  border: 4px solid #222;
  border-radius: 32px;
  box-shadow: 12px 12px 0 #222;
  overflow-x: hidden;
}

.header {
  background: #fffbe7 !important;
  border-bottom: 3px solid #222;
  box-shadow: 0 4px 0 #222;
  padding: 0;
  height: 80px;
  width: 100%;
  .header-content {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 80px;
  }
  .logo {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: 900;
    color: #222;
    letter-spacing: 1px;
    .logo-icon {
      font-size: 38px;
      margin-right: 14px;
      color: #ffbe0b;
      filter: drop-shadow(2px 2px 0 #222);
    }
  }
  .nav-menu {
    :deep(.el-menu) {
      background: transparent !important;
      border: none !important;
      .el-menu-item {
        font-size: 18px;
        font-weight: 700;
        padding: 0 28px;
        height: 50px;
        line-height: 50px;
        border-radius: 16px;
        border: 2.5px solid #222;
        margin: 0 6px;
        background: #fffbe7;
        box-shadow: 3px 3px 0 #222;
        color: #222;
        transition: box-shadow 0.2s, background 0.2s;
        &:hover,
        &.is-active {
          background: #ffbe0b !important;
          color: #222 !important;
          box-shadow: 6px 6px 0 #222;
        }
      }
    }
  }
}

.main-content {
  flex: 1;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 60px 80px;
}

.welcome-section {
  text-align: center;
  margin-bottom: 80px;
  .welcome-title {
    font-size: 56px;
    font-weight: 900;
    color: #222;
    text-shadow: 2px 2px 0 #fffbe7, 4px 4px 0 #222;
    letter-spacing: 2px;
    margin: 20px 0 20px;
  }
  .welcome-subtitle {
    font-size: 22px;
    color: #222;
    font-weight: 700;
    background: #ffe066;
    display: inline-block;
    padding: 8px 24px;
    border-radius: 16px;
    border: 2.5px solid #222;
    box-shadow: 3px 3px 0 #222;
    margin: 0;
  }
}

.tools-section {
  width: 100%;
  overflow-x: hidden;
  .tool-category {
    margin-bottom: 80px;
    width: 100%;
    .category-header {
      text-align: center;
      margin-bottom: 50px;
      .category-icon {
        font-size: 64px;
        color: #409eff;
        margin-bottom: 20px;
        background: #fffbe7;
        border: 3px solid #222;
        border-radius: 18px;
        box-shadow: 4px 4px 0 #222;
        padding: 10px;
        display: inline-block;
      }
      .category-title {
        font-size: 36px;
        font-weight: 900;
        color: #222;
        letter-spacing: 1px;
        text-shadow: 2px 2px 0 #fffbe7, 4px 4px 0 #222;
        margin-bottom: 12px;
      }
      .category-description {
        font-size: 18px;
        color: #222;
        font-weight: 700;
        background: #ffbe0b;
        display: inline-block;
        padding: 6px 18px;
        border-radius: 14px;
        border: 2.5px solid #222;
        box-shadow: 2px 2px 0 #222;
        margin: 0;
      }
    }
    .tool-grid {
      .tool-card {
        cursor: pointer;
        border: 3px solid #222 !important;
        border-radius: 22px !important;
        box-shadow: 6px 6px 0 #222 !important;
        background: #fffbe7 !important;
        transition: box-shadow 0.2s, background 0.2s;
        display: flex;
        flex-direction: column;
        width: 100%;
        box-sizing: border-box;
        &:hover {
          box-shadow: 12px 12px 0 #222 !important;
          background: #ffe066 !important;
        }
        &.placeholder-card {
          opacity: 0.7;
          cursor: default;
          background: #f9f7f3 !important;
          border-style: dashed !important;
          box-shadow: 0 0 0 #222 !important;
          height: 100%;
        }
        :deep(.el-card__body) {
          padding: 30px;
          display: flex;
          flex-direction: column;
          flex: 1;
        }
        .tool-content {
          text-align: center;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .tool-icon {
            color: #409eff;
            margin-bottom: 20px;
            background: #fff;
            border: 2.5px solid #222;
            border-radius: 14px;
            box-shadow: 2px 2px 0 #222;
            padding: 8px;
            display: inline-block;
          }
          .tool-name {
            font-size: 22px;
            font-weight: 900;
            color: #222;
            margin-bottom: 15px;
            letter-spacing: 1px;
          }
          .tool-desc {
            font-size: 15px;
            color: #222;
            font-weight: 700;
            line-height: 1.6;
            margin: 0;
          }
        }
        .tool-footer {
          margin-top: 25px;
          text-align: center;
          .el-button {
            width: 100%;
            height: 44px;
            font-size: 18px;
            font-weight: 900;
            border: 3px solid #222 !important;
            border-radius: 16px !important;
            box-shadow: 4px 4px 0 #222 !important;
            background: #ffbe0b !important;
            color: #222 !important;
            letter-spacing: 1px;
            transition: box-shadow 0.2s, background 0.2s;
            &:hover {
              background: #fffbe7 !important;
              color: #222 !important;
              box-shadow: 8px 8px 0 #222 !important;
            }
            &[disabled] {
              background: #e0e0e0 !important;
              color: #aaa !important;
              border-style: dashed !important;
              box-shadow: none !important;
            }
          }
        }
      }
    }
  }
}

.footer {
  background: #fffbe7 !important;
  color: #222 !important;
  height: 80px;
  border-top: 3px solid #222;
  box-shadow: 0 -4px 0 #222;
  .footer-content {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 80px;
    p {
      margin: 0;
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 1px;
    }
  }
}

// Element Plus 组件样式重置
:deep(.el-header) {
  width: 100% !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}
:deep(.el-main) {
  width: 100% !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}
:deep(.el-footer) {
  width: 100% !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}
:deep(.el-row) {
  width: 100% !important;
  box-sizing: border-box !important;
}
:deep(.el-col) {
  box-sizing: border-box !important;
}

// 响应式内边距调整
@media (max-width: 1600px) {
  .main-content {
    padding: 60px 60px;
  }
  .header .header-content {
    padding: 0 60px;
  }
  .footer .footer-content {
    padding: 0 60px;
  }
}
@media (max-width: 1200px) {
  .main-content {
    padding: 40px 40px;
  }
  .header .header-content {
    padding: 0 40px;
  }
  .footer .footer-content {
    padding: 0 40px;
  }
  .tool-grid {
    .el-col {
      margin-bottom: 30px;
    }
  }
}
@media (max-width: 768px) {
  .welcome-section .welcome-title {
    font-size: 36px;
  }
  .tools-section .tool-category .category-header .category-title {
    font-size: 28px;
  }
  .tool-grid {
    margin: 0 !important;
    :deep(.el-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.el-col) {
      padding-left: 10px !important;
      padding-right: 10px !important;
    }
  }
  .main-content {
    padding: 40px 20px !important;
  }
  .header .header-content {
    padding: 0 20px !important;
  }
  .footer .footer-content {
    padding: 0 20px !important;
  }
}
</style>
